import React, { Component } from 'react';
import './index.css'
class Footer extends Component {

    choiceAll=(event)=>{
       const isChecked=event.target.checked;
       const {choiceAllOption}=this.props
       choiceAllOption(isChecked)

    }

   


    render() {
        const {todos}=this.props
        const totalCount=todos.reduce((pre,cur)=>{
           return pre+1
        },0)

        const finishedCount=todos.reduce((pre,cur)=>{
            return pre+(cur.done ? 1 : 0)
        },0)

        return (
            <div className="todo-footer">
                <label>
                    <input type="checkbox" checked={(totalCount===finishedCount && totalCount!==0)? true: false}  onChange={this.choiceAll}/>
                </label>
                <span>
                    <span>已完成{finishedCount}</span> / 全部{totalCount}
                </span>
                <button className="btn btn-danger" onClick={()=>{this.props.clearAllDone()}}>清除已完成任务</button>           
            </div>
        );
    }
}

export default Footer;